<template>
    <div style="height: 100%" class="warp-2 body-content">
        <navbar :title="$t('mall_19')"></navbar>
        <div class="content-noBottom">
            <div class="details-body">
                <div class="info-img">
                    <van-image fit="cover" width="100%" height="100%" :src="appUrl + mall.impPic"/>
                </div>
                <div class="info-info">
                    <div class="info-title">{{ mall.impName }}</div>
                    <div class="info-type">
                        <span>{{ $t('mall_20') }}: </span>
                        <span>{{ mall.imCatalogList | typeHandle }}</span>
                    </div>
                    <div class="info-date">
                        <span>{{ $t('mall_21') }}: </span>
                        <span v-if="mall.impEndtime">{{ $t('mall_22', {'value1': mall.impCreatetime, 'value2': ((mall.impEndtime).indexOf('9999-12-30') > -1 ? $t('cos_unlimited') : mall.impEndtime)}) }}</span>
                    </div>
                </div>
                <div class="info-more">
                    <div>
                        <div>{{ mall.impTotal || 0 }}</div>
                        <div>{{ $t('mall_23') }}</div>
                    </div>
                    <div>
                        <div>{{ mall.impExchangeTotal || 0 }}</div>
                        <div>{{ $t('mall_24') }}</div>
                    </div>
                    <div>
                        <div>{{ mall.impExchange || 0 }}</div>
                        <div>{{ $t('mall_25') }}</div>
                    </div>
                </div>
                <div class="info-content">
                    <div class="content-title">{{ $t('mall_19') }}</div>
                    <div class="content-content" v-html=" $xss(mall.impBrief || $t('mall_26'))"></div>
                </div>
            </div>
            <div class="mall-convertible">
                <div class="mall-fixed">
                    <div class="mall-credit">
                        <span>{{ $t('mall_25') }}: </span>
                        <span>{{ $t('mall_17', {'value': mall.impExchange}) }}</span>
                    </div>
                    <!--我要兑换-->
                    <div>
                        <div @click="$router.push(`/mall/EditAddress/${mall.impId}`)" :class="(!mall.impExchange || userCredit < mall.impExchange)? 'mall-btn cur':'mall-btn'">
                        {{ $t("mall_27") }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Button, Image } from 'vant';
export default {
    name: 'MallDetails',
    components: {
        vanImage: Image,
        vanButton: Button
    },
    data() {
        return {
            impId: this.$route.params.impId,
            mall: {
                impExchange: null
            },
            userCredit: 0
        };
    },
    filters: {
        typeHandle(value) {
            let str = '';
            if (value && value.length > 0) {
                let names = [];
                value.forEach(item => {
                    names.push(item.imcName);
                });
                str = names.join(',');
            }
            return str;
        }
    },
    methods: {
        getUserCredit() {
            this.$axios.get('/app/credit/user').then((res) => {
                if (res.data) {
                    this.userCredit = res.data;
                }
            });
        },
        getMallDetailsById() {
            this.$axios.get(`/app/api/trainee/im/product/${this.impId}`).then(res => {
                if (res.data) {
                    this.mall = res.data;
                }
            });
        }
    },
    created() {
        this.getUserCredit();
        this.getMallDetailsById();
    }
};
</script>

<style scoped lang="less">
    .details-body {
        height: calc(100vh - 116px);
        overflow-y: auto;
        .info-img {
            width: 100%;
            height: 240px;
        }
        .info-info {
            padding: 15px 20px;
            background: #fff;
            border-bottom: 1px solid #EFEFEF;
            .info-title {
                font-size: 18px;
            }
            .info-type {
                margin: 10px 0;
                &>span:first-child {
                    color: #999999;
                }
                &>span:last-child {
                    color: #666666;
                }
            }
            .info-date {
                margin: 10px 0;
                &>span:first-child {
                    color: #999999;
                }
                &>span:last-child {
                    color: #666666;
                }
            }
        }
        .info-more {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            padding: 0 20px;
            background: #fff;
            &>div {
                height: 80px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                position: relative;
                &>div:first-child {
                    margin-bottom: 10px;
                    color: #075ebb;
                }
                &>div:last-child {
                    color: #999999;
                }
            }
            &>div:last-child {
                &>div:first-child {
                    color: #075ebb;
                }
            }
            &>div:not(:last-child):after {
                position: absolute;
                right: 0;
                content: '';
                width: 1px;
                height: 40px;
                background: #EFEFEF;
            }
        }
        .info-content {
            .content-title {
                padding: 10px 20px;
            }
            .content-content {
                padding: 10px 20px;
                background: #fff;
                min-height: 30px;
            }
        }
    }
    .mall-convertible {
        position: fixed;
        bottom: 0;
        height: 60px;
        width: 100%;
        border-top: 1px solid #DADBDD;
        .mall-fixed {
            display: flex;
            height: 56px;
            background: #fff;
            border-top: 1px solid #cccccc;
            justify-content: center;
            align-content: center;
            align-items: center;
            position: absolute;
            width: 100%;
            z-index: 1;
            padding: 0 16px;
            box-sizing: border-box;
            .mall-credit {
                flex: 1;
                &>span:first-child {
                    color: #999999;
                }
                &>span:last-child {
                    font-size: 20px;
                }
            }
            .mall-btn{
                width: 180px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                background: #075ebb;
                color: #ffffff;
                border-radius: 4px;
                margin-left: 16px;
                &.cur{
                    background: #E6E6E6;
                    color: #cccccc;
                }
            }
        }
    }
</style>
